<!DOCTYPE html>
<html>
<head>
    <meta content="charset=utf-8">
    <title>我的笔记-桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico" >
    <link rel="stylesheet" href="/public/styles/base.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css"/>
    <style>
        html,body{height: 100%}
        .outer{background: #252525 none repeat scroll 0 0;box-sizing: border-box;min-height: 100%;opacity: 0;padding-top: 1px;width: 100%;}
        .body-container{max-width: 960px;margin: 7px auto 0;overflow: auto;width: 97%;min-width: 730px;}

        .body-left-box{box-sizing: border-box;padding: 15px 25px;background:#fffcf6;border-top:1px solid #fffcf6;float: left;width: 67%;}
        .body-left-box .breadcrumb{background: none;border-bottom: 1px solid #ddd;margin-bottom: 8px;}
        .body-left-box .empty-tips{font-size: 18px;margin-bottom: 380px;padding-top: 50px;text-align: center;}
        .body-left-box .empty-tips i{margin-right: 5px;font-size: 21px}
        .body-left-box ul.list li{border-bottom: 1px solid #343434;margin-bottom: 10px;overflow: auto;padding-bottom: 3px;}
        .body-left-box ul.list li h5{font-size: 20px;font-family: "微软雅黑";display: inline-block;color:#000;transition: color 150ms ease-in 0ms; }
        .body-left-box ul.list li h5:hover{color:#49bef1;}
        .body-left-box ul.list li a:hover,.body-left-box ul.list li a:focus{text-decoration: none;outline: none;}
        .body-left-box ul.list li .tips{margin: 3px auto;color:#888;}
        .body-left-box ul.list li .tips .time{margin-right: 10px;}
        .body-left-box ul.list li .tips .tag{}
        .body-left-box ul.list li .text{line-height: 20px;text-align:justify;color:#333;}
        .body-left-box ul.list li .more{float: right;color:#000;}
        .body-left-box ul.list li .more:hover{color:#1094fa;text-decoration: none;}

        .body-right-box {float: left;width: 32%;margin-left: 1%;box-sizing: border-box}
        .body-right-box .search-box{width: 100%;background: #fffcf6;margin-bottom: 10px;}
        .body-right-box .search-box .input-group{margin: 0 auto;padding: 9px 5px;width: 96%;}
        .body-right-box .link-box{width: 100%;background: #fffcf6;margin-bottom: 10px;padding: 13px;}
        .body-right-box .link-box h4{font-size: 16px;margin-bottom: 8px;}
        .body-right-box .link-box h4 i{margin-right: 5px;}
        .body-right-box .link-box .list{margin-bottom: 20px;overflow: auto;}
        .body-right-box .link-box .list li{border: 1px solid #ccc;border-radius: 3px;float: left;margin-right: 1%;padding: 3px 0;text-align: center;width: 32.3%;margin-bottom: 5px;}
        .body-right-box .link-box .list li .name{}
        .body-right-box .link-box .list li .number{color:#888;font-size: 10px;-webkit-transform:scale(0.83);display: inline-block}
        .body-right-box .dynamic-box{background: #fffcf6;margin-bottom: 10px;padding:13px;}

        #pagination{margin-bottom: 0;}
        .pagination>li>a,.pagination>li>span{color:#343434;}
        .pagination>li>a,.pagination>li>span{color:#343434;}
        .pagination > .active > a,
        .pagination > .active > a:focus,
        .pagination > .active > a:hover,
        .pagination > .active > span,
        .pagination > .active > span:focus,
        .pagination > .active > span:hover{color:#fff;background: #343434;border-color:#343434;}
    </style>
</head>
<body>
    <div class="outer">
        <include file="./Application/Home/View/Index/head_inc.html"/>
        <div class="body-container">
            <div class="body-left-box">
                <ol class="breadcrumb">
                    <li><a href="/{$URL_PREFIX}blog">Blog</a></li>
                    <if condition="$keyword != null">
                        <li><a href="/{$URL_PREFIX}blog/keyword/{$keyword}">笔记搜索："{$keyword}"</a></li>
                    </if>
                    <if condition="$tag != null">
                        <li><a href="/{$URL_PREFIX}blog/tag/{$tag}">笔记标签： "{$tag}"</a></li>
                    </if>
                    <if condition="$month != null">
                        <li><a href="/{$URL_PREFIX}blog/month/{$month}">笔记存档："{$month}"</a></li>
                    </if>
                    <li class="active">列表</li>
                </ol>
                <if condition="$data == null">
                    <div class="empty-tips"><i class="icon-remove"></i>没有内容！</div>
                </if>
                <ul class="list">
                    <foreach name="data" item="data">
                        <li>
                            <a href="/{$URL_PREFIX}blog/detail/{$data.id}" target="_blank"><h5>{$data.title}</h5></a>
                            <p class="tips"><span class="time">发布时间：{$data.create_time}</span><span class="tag">标签：{$data.tag}</span></p>
                            <p class="text">{$data.abstract}</p>
                            <a class="more" href="/{$URL_PREFIX}blog/detail/{$data.id}" target="_blank">阅读全文...</a>
                        </li>
                    </foreach>
                </ul>
                <div class="text-center">
                    <ul id="pagination" class="pagination-sm"></ul>
                </div>
            </div>
            <div class="body-right-box">
                <div class="search-box">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="输入标题或内容" id="keyword" value="{$keyword}" autocomplete="false">
                        <span class="input-group-btn">
                          <a class="btn btn-default" href="javascript:;" id="search"><i class="icon-search"></i></a>
                        </span>
                    </div>
                </div>
                <div class="link-box">
                    <h4><i class="icon-tags"></i>笔记标签：</h4>
                    <ul class="list">
                        <li><a href="/{$URL_PREFIX}blog/tag/js"><span class="name">js</span><span class="number">({$tagCountSession[0].count})</span></a></li>
                        <li><a href="/{$URL_PREFIX}blog/tag/css"><span class="name">css</span><span class="number">({$tagCountSession[1].count})</span></a></li>
                        <li><a href="/{$URL_PREFIX}blog/tag/html"><span class="name">html</span><span class="number">({$tagCountSession[2].count})</span></a></li>
                        <li><a href="/{$URL_PREFIX}blog/tag/plugin"><span class="name">plugin</span><span class="number">({$tagCountSession[3].count})</span></a></li>
                    </ul>
                    <h4><i class="icon-folder-close"></i>笔记存档：</h4>
                    <ul class="list">
                        <foreach name="monthSession" item="monthSession">
                            <li><a href="/{$URL_PREFIX}blog/month/{$monthSession.months}"><span class="name">{$monthSession.monthstext}</span><span class="number">({$monthSession.count})</span></a></li>
                        </foreach>
                    </ul>
                </div>
            </div>
        </div>
        <include file="./Application/Home/View/Index/footer_inc.html"/>
    </div>
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="/public/scripts/jquery.twbsPagination.min.js"></script>
    <script src="/public/scripts/base.js"></script>
    <script>
        //加载分页插件
        function pagination(){
            var href = "/{$URL_PREFIX}blog/page/{{number}}";
            if("{$keyword}".trim() != "") href = "/{$URL_PREFIX}blog/keyword/{$keyword}/page/{{number}}";
            if("{$tag}".trim() != "") href = "/{$URL_PREFIX}blog/tag/{$tag}/page/{{number}}";
            if("{$month}".trim() != "") href = "/{$URL_PREFIX}blog/month/{$month}/page/{{number}}";
            $('#pagination').twbsPagination({
                first:"首页",
                prev:"上一页",
                next :"下一页",
                last :"尾页",
                totalPages: {$totalPage},
                startPage: {$currentPage},
                visiblePages: 5,
                href: href
            });
        }
        //关键词搜索
        function search(){
            $("#search").click(function(){
                if($("#keyword").val().trim() == "") return false;
                var keyword = $("#keyword").val().trim();
                $(this).attr("href","/{$URL_PREFIX}blog?keyword="+keyword);
            });
            $("#keyword").keyup(function(event){
                if(event.keyCode ==13){
                    if($(this).val().trim() == "") return false;
                    $("#search").attr("href","/{$URL_PREFIX}blog/keyword/"+$(this).val().trim());
                    document.getElementById("search").click();
                }
            });
        }
        //统一执行入口
        $(function(){
            if( {$totalPage} > 0 ) pagination();
            search();
        })
    </script>
</body>
</html>